mui.init();
var main = null;
var gameList = [];//定义游戏的数据列表数组变量
var scrollPic = [];//定义游戏的轮播数据列表数组变量
var docs = [];//定义游戏轮播指示灯数组变量
mui.getJSON('data/newsGame.json', {
		category: 'news'
	}, function(data) {
		if(data.gameList) {
			gameList = data.gameList;
			console.log("gameList===:" + gameList);
			var listStr = "";//定义资讯数据列表变量
			var title = "";//定义游戏标题变量
			var gameName = "";//定义游戏名字变量
			var gamePic = "";//定义游戏图片变量
			var game_view_time = "";//定义游戏查看量变量
			for(var i = 0; i < gameList.length; i++) {
				 title = gameList[i].game_title;//接收请求出来的游戏标题
				 gameName = gameList[i].gameNmae_btn;//接收请求出来的游戏名字
				 gamePic = gameList[i].pic;//接收请求出来的游戏图片
				 game_view_time = gameList[i].game_view_time;//接收请求出来的游戏查看量
				console.log("title===:" + title);
				listStr += del_html_tags($("#game_list").html(), "{{game_title}}", title);//将游戏标题填充
				listStr = del_html_tags(listStr, "{{game_name}}", gameName);//将游戏名字填充
				listStr = del_html_tags(listStr, "{{gamePic}}", gamePic);//将游戏图片填充
				listStr = del_html_tags(listStr, "{{view_count}}", game_view_time);//将游戏查看量填充
			}
			$("ul.mui-table-view").append(listStr);//最后将填充玩成后追加到ul.mui-table-view的元素里面
		}
		if(data.scrollPic) {
			scrollPic = data.scrollPic;
			//取头和尾
			var oSrcFL = $("div.mui-slider-item.mui-slider-item-duplicate:first-child");//轮播的第一张
			var oSrcLast = $("div.mui-slider-item.mui-slider-item-duplicate:last-child");//轮播的最后一张
			console.log("mui-slider-item mui-slider-item-duplicate==:"+oSrcFL.length);
			var srcList = "";//定义轮播的数据量
			var srcUrl = "";//定义轮播的图片数
			var srcWord = "";//定义轮播图片标题数
			for (var i = 0; i < scrollPic.length; i++) {
				srcUrl = scrollPic[i].src;//接收图片地址
				srcWord = scrollPic[i].word;//接收图片标题
				srcList += del_html_tags($("#srcList").html(),"{{scrPic}}",srcUrl);//将图片填充（注$("#srcList").html()是获取id为srcList里的HTML）
				srcList = del_html_tags(srcList,"{{srcTitle}}",srcWord);//将图片标题填充
				//轮播的最后一张和第一张
				$("div.mui-slider-item.mui-slider-item-duplicate:first-child img").attr('src',scrollPic[0].src);//将轮播的第一张轮播的图片替换
				$("div.mui-slider-item.mui-slider-item-duplicate:first-child p").text(scrollPic[0].word);//将轮播的第一张张轮播的图片标题替换
				$("div.mui-slider-item.mui-slider-item-duplicate:last-child img").attr('src',scrollPic[scrollPic.length-1].src);//将轮播的最后张轮播的图片替换
				$("div.mui-slider-item.mui-slider-item-duplicate:last-child p").text(scrollPic[scrollPic.length-1].word);//将轮播的最后张轮播的图片标题替换
			}
			oSrcFL.after(srcList);//最后将填充完毕的追加到轮播第一张的后面（注mui轮播框架另外加的第一张和最后一张）
			
			//轮播指示灯（点点）
			var docs = scrollPic.length-1;//减1是类为mui-active的第一个点
			var oDoc = $("div.mui-indicator.mui-active");
			for (var i = 0; i < docs; i++) {
				oDoc.after("<div class='mui-indicator'></div>");
			};
		}
	}

);
//自定义一个方法批量替换制定的字符 
function del_html_tags(str, reallyDo, replaceWith) {
	var e = new RegExp(reallyDo, "g"); //参数 reallyDo 是一个字符串，指定了正则表达式的模式或其他正则表达式,参数 "g" 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配
	words = str.replace(e, replaceWith); //str里的e换做replaceWith
	return words;
}

/*选项卡 ========*/
mui.plusReady(function() {
	newSelect(); //调用选项卡方法  注：改选项卡是被抱在mui.plusReady(function() {})或mui.ready(function(){})
});

function newSelect() {
	var add = document.getElementById("add-tab");
	var wrapper = document.getElementById("scroll-wrapper");
	var width = $(document.body).width();
	add.addEventListener("tap", function() {
		console.log("更多")
	});
	$(wrapper).css("width", width - 60); //滚动包装容器减掉60像素，目的让加号有位置
	wrapper.classList.add("mui-scroll-wrapper"); //classList属性是返回元素的类名
	mui(wrapper).scroll({
		bounce: false //滚动条是否有弹力默认是true 
	});

	var mui_scroll = document.getElementById('scroll-wrapper');
	var a = mui_scroll.getElementsByTagName('a');
	var liset_div = $(".liset_div"); //内容

	for(var i = 0; i < a.length; i++) {
		a[i].index = i;
		a[i].addEventListener('tap', function() {
			for(var i = 0; i < a.length; i++) {
				liset_div[i].className = "liset_div hide";
			}
			liset_div[this.index].className = "liset_div show"
		})
	}
}
/*选项卡结束 ========*/

